<template>
  <div>
    <el-row class="block-item">
      <el-col :span="12">
        <!-- <div>&nbsp;</div> -->
        <el-button type="primary" @click="onOpenImportProduct">
          模板导入产品
        </el-button>
        <el-button type="text" @click="onGetProductTemplate">
          模板下载
        </el-button>
      </el-col>
    </el-row>
    <el-editable :columns="COLUMNS_PRODUCT" :payload="payload_products" @reload="reloadData">
      <template v-slot:default-count="{ row }">
        <div>
          <el-input-number v-model="row.count" size="small" :min="1" :max="10" @change="onChangeCount" />
        </div>
      </template>
      <template v-slot:default-hospital="{ row }">
        <div>
          <el-select v-model="row.hospital" />
        </div>
      </template>
      <template v-slot:default-opt="{ row, $index }">
        <el-button @click="onDeleteProduct(row, $index)">
          删除
        </el-button>
      </template>
    </el-editable>
  </div>
</template>

<script>
import { ProductAddDialogService } from '~/modules/product/product-add.dialog.module';
import { UploadExcelDialogService } from '~/modules/upload/upload-excel.dialog.module';
import * as CONSTS from './purchase-products-list.const';
import ElEditable from '@components/el-editable';
import { IndexService } from './purchase-products-list.service';
const service = new IndexService();
export default {
  components: {
    ElEditable
  },
  props: {
    products: Array,
    type: {
      type: String,
      default: 'default'
    },
    operationType: String
  },
  data() {
    return {
      ...CONSTS,
      _products: [],
      payload_products: {},
      pager: {
        number: 1,
        size: 20
      }
    };
  },
  computed: {
    productAddDialogService: function() {
      return new ProductAddDialogService(this.$axios, { type: this.type });
    },
    uploadExcelDialogService: function() {
      return new UploadExcelDialogService(this.$axios);
    }
  },
  watch: {
    products: {
      handler: function(val, oldVal) {
        if (val !== undefined) {
          this._products = val;
          let startIndex = this.pager.number - 1;
          let endIndex = this.pager.size;
          this.payload_products = service.getPayload(this._products, this.pager, startIndex, endIndex);
        }
      },
      immediate: true
    }
  },
  methods: {
    // 前端分页逻辑
    reloadData(pager) {
      let startIndex = (pager.number - 1) * pager.size;
      let endIndex = pager.number * pager.size;
      this.payload_products = service.getPayload(this._products, pager, startIndex, endIndex);
      this.pager = pager;
    },
    onDeleteProduct(row, index) {
      let startIndex = (this.pager.number - 1) * this.pager.size;
      this._products.splice(startIndex + index, 1);
      this.$emit('update:products', this._products);
    },
    onChangeCount() {
      this.$emit('update:products', this._products);
    },
    onOpenProductDialog() {
      this.productAddDialogService
        .create({
          title: '添加消耗产品',
          query: { operationType: this.operationType },
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    },
    onOpenImportProduct() {
      this.uploadExcelDialogService
        .create({
          title: '模板导入',
          query: {},
          progressCompleteHandler: (data = {}) => {
            // console.log(data);
            // console.log('进度到100%');
          }
        })
        .mount();
    },
    onGetProductTemplate() {}
  }
};
</script>

<style></style>
